<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${topic.title } - ${block.name } - 校园论坛 - 相思湖学院</title>
<link rel="shortcut icon" href="static/image/logo_little.png">
<link rel="stylesheet" type="text/css" href="static/css/top.css" >
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css" >
<link rel="stylesheet" type="text/css" href="static/css/page.css" >
<link rel="stylesheet" type="text/css" href="static/css/topic.css" >
</head>
<body>
	<div class="top">
		<img class="logo" alt="相思湖学院论坛" src="static/image/logo.png">
		<form action="search" method="post" onsubmit="return isEmpty()">
			<input  id="search" name="search" type="text" value="" placeholder="请输入搜索内容">
		    <button type="submit" class="submit">搜索</button>
		</form>
		<script type="text/javascript">
			function isEmpty() {
				if(document.getElementById("search").value == "") {
					$('<div>').appendTo('body').addClass('alert alert-info').html("请输入搜索内容").show().delay(1500).fadeOut();
					return false;
				}
				return true;
			}
		</script>
		<c:if test="${user != null }">
			<div class="user">
				<span><a style="font-weight: 800;color: black;" href="userinfo">${user.username }</a></span>
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">我的<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="user?id=${user.id }&selected=mytopic">帖子</a></li>
						<!-- <li><a href="#">收藏</a></li>
						<li><a href="#">好友</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="userinfo">设置</a></span>
				<!-- <span>|</span>
				<span><a href="#">消息</a></span> -->
				<span>|</span>
				<div class="dropdown" style="display: inline-block;">
					<a data-toggle="dropdown" class="dropdown-toggle" href="#">提醒<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href="notice">消息</a></li>
						<!-- <li><a href="#">新听众</a></li> -->
					</ul>
				</div>
				<span>|</span>
				<span><a href="exit">退出</a></span>
				<c:if test="${user.avatar != null && user.avatar != '' }">
					<img class="avatar" src="${user.avatar }">
				</c:if>
				<c:if test="${user.avatar == null || user.avatar == '' }">
					<img class="avatar" src="static/image/noavatar.jpg">
				</c:if>
			</div>
		</c:if>
		<c:if test="${user == null }">
			<div class="visitor">
				<a href="ps.login">登陆</a>
				<a href="${path }/register.jsp">注册</a>
			</div>
		</c:if>
	</div>
	<div class="contral">
		<div class="title">
			<a href="forum" class="nvhm" title="首页"></a>
			<em></em>
			<a href="forum">论坛</a>
			<em></em>
			<a>${partition.name }</a>
			<em></em>
			<a href="block?bid=${block.id }">${block.name }</a>
			<em></em>
			<a href="ps.topic?id=${topic.id }">${topic.title }</a>
		</div>
		<div class="pg">
			<a href="ps.createTopic?bid=${block.id }&operation=createTopic"><button title="发新帖">发 帖</button></a>
			<button title="回复" onclick="showWindow('reply', 0)">回 复</button>
			<div class="pagination">
				<c:if test="${page.hasPreviousPage == true }">
					<a href="ps.topic?id=${topic.id }&pageNum=${page.prePage}">上一页</a>
				</c:if>
				<c:if test="${page.pageNum > 3 }">
					<a href="ps.topic?id=${topic.id }">1 ...</a>
				</c:if>
				<c:set var="index" value="${page.pageNum - (page.pageNum == page.pages ? 4:(page.pageNum == (page.pages - 1) ? 3:2))}" />
				<c:forEach var="x" begin="1" end="${page.pageNum == page.pages ? 4:(page.pageNum == (page.pages - 1)) ? 3:2 }" step="1"> 
					<c:if test="${index > 0 && index < page.pageNum }"><a href="ps.topic?id=${topic.id }&pageNum=${index}">${index }</a></c:if>
					<c:set var="index" value="${index + 1}" />
				</c:forEach>
				<c:if test="${page.pages != 0 }"><strong>${page.pageNum }</strong></c:if>
				<c:set var="index" value="${page.pageNum }" />
				<c:forEach var="x" begin="1" end="${page.pageNum == 1 ? 4:(page.pageNum == 2) ? 3:2 }" varStatus="status" step="1"> 
					<c:set var="index" value="${index + 1}" />
					<c:if test="${index <= page.pages }"><a href="ps.topic?id=${topic.id }&pageNum=${index}">${index }</a></c:if>
				</c:forEach>
				<c:if test="${page.pageNum < (page.pages - 2) }">
					<a href="ps.topic?id=${topic.id }&pageNum=${page.pages}">... ${page.pages }</a>
				</c:if>
				<c:if test="${page.pages != 0 }">
					<label>
						<input type="text" title="输入页码，按回车快速跳转" value="${page.pageNum }"
							onkeydown="if(event.keyCode==13) {window.location='ps.topic?id=${topic.id }&pageNum='+this.value;}">
						<span>/${page.pages }页</span>
					</label>
				</c:if>
				<c:if test="${page.hasNextPage == true }">
					<a href="ps.topic?id=${topic.id }&pageNum=${page.nextPage }">下一页</a>
				</c:if>
			</div>
		</div>
		<div class="mn">
			<c:if test="${page.pageNum <= 1 }">
				<table style="width: 100%;">
					<tr>
						<td class="pls">
							<div class="hm ptn">
								<span class="xg1">查看：</span>
								<span class="xi1">${topic.clicks }</span>
								<span class="pipe">|</span>
								<span class="xg1">回复：</span>
								<span class="xi1">${topic.replies }</span>
							</div>
						</td>
						<td class="plc ptm pbn vwthd">
							<h1 class="ts">${topic.title }</h1>
						</td>
					</tr>
				</table>
				<table cellspacing="0" cellpadding="0" class="ad">
					<tr>
						<td class="pls"></td>
						<td class="plc"></td>
					</tr>
				</table>
				<table style="width: 100%;">
					<tr>
						<td class="pls">
							<div class="pi hm"><a href="user?id=${topic.user.id }">${topic.user.username }</a></div>
							<c:if test="${topic.user.avatar != null && topic.user.avatar != '' }">
								<img class="avatar" src="${topic.user.avatar }">
							</c:if>
							<c:if test="${topic.user.avatar == null || topic.user.avatar == '' }">
								<img class="avatar" src="static/image/noavatar.jpg">
							</c:if>
							<c:if test="${topic.user.role == 0 }">
								<span class="uif fw">普通用户</span>
							</c:if>
							<c:if test="${topic.user.role == 1 }">
								<span class="uif fw">版主</span>
							</c:if>
							<c:if test="${topic.user.role == 2 }">
								<span class="uif fw">总版主</span>
							</c:if>
							<span class="uif of">注册时间：${topic.user.registertime }</span>
						</td>
						<td class="plc plch">
							<div class="pi">
								<span>发表于 ${topic.createtime }</span>
								<c:if test="${topic.uid == user.id }">
									<span class="pipe">|</span>
									<font color="#FFA200">自己</font>
								</c:if>
								<span style="float: right; color: red;">楼主</span>
							</div>
							<div class="content">
								<i class="pstatus">本帖最后由 ${topic.user.username } 于 ${topic.updatetime }</i><br/><br/>
								<div class="">${topic.content }</div>
							</div>
						</td>
					</tr>
					<tr>
						<th class="pls"></th>
						<th class="plc">
							<div class="po hin">
								<div class="pob cl">
									<em>
										<a class="fastre" href="javascript:;" onclick="showWindow('reply', 0)">回复</a>
										<c:if test="${topic.user.id == user.id }">
											<a class="editp" href="ps.createTopic?bid=${block.id }&tid=${topic.id }&operation=updateTopic">编辑</a>
										</c:if>
										<c:if test="${topic.user.id == user.id || user.role > topic.user.role }">
											<a href="javascript:;" class="" onclick="javascript:return warning('deleteTopic?id=${topic.id }&bid=${block.id}')">删除</a>
										</c:if>
									</em>
									<br/>
								</div>
							</div>
						</th>
					</tr>
				</table>
				<table cellspacing="0" cellpadding="0" class="ad">
					<tr>
						<td class="pls"></td>
						<td class="plc"></td>
					</tr>
				</table>
			</c:if>
			<c:forEach items="${replyList }" var="r" varStatus="status">
					<table cellspacing="0" cellpadding="0" class="ad">
						<tr>
							<td class="pls"></td>
							<td class="plc"></td>
						</tr>
					</table>
					<table id="replyId${r.id }" style="width: 100%;">
						
						<c:if test="${r.isdelete == 0 }">
							<tr>
								<td class="pls">
									<div class="pi hm"><a href="user?id=${r.user.id }">${r.user.username }</a></div>
									<c:if test="${r.user.avatar != null && r.user.avatar != '' }">
										<img class="avatar" src="${r.user.avatar }">
									</c:if>
									<c:if test="${r.user.avatar == null || r.user.avatar == '' }">
										<img class="avatar" src="static/image/noavatar.jpg">
									</c:if>
									<c:if test="${r.user.role == 0 }">
										<span class="uif fw">普通用户</span>
									</c:if>
									<c:if test="${r.user.role == 1 }">
										<span class="uif fw">版主</span>
									</c:if>
									<c:if test="${r.user.role == 2 }">
										<span class="uif fw">总版主</span>
									</c:if>
									<span class="uif of">注册时间：${r.user.registertime }</span>
								</td>
								<td class="plc plch">
									<div class="pi">
										<span>发表于 ${r.createtime }</span>
										<c:if test="${r.user.id == user.id }">
											<span class="pipe">|</span>
											<font color="#FFA200">自己</font>
										</c:if>
										<c:if test="${page.pageNum == 1 }">
											<c:if test="${status.count == 1 }">
												<span style="float: right;">沙发</span>
											</c:if>
											<c:if test="${status.count != 1 }">
												<span style="float: right;">${status.count }#</span>
											</c:if>
										</c:if>
										<c:if test="${page.pageNum != 1 }">
											<span style="float: right;">${status.count * page.pageNum }#</span>
										</c:if>
									</div>
									<div class="content">
										<div>${r.content }</div>
									</div>
									<c:if test="${r.reply2List.size() != 0 }">
										<a id="reply2_a${r.id }" class="reply2_a" href="javascript:;" onclick="reply2('${r.id }')">收起回复</a>
										<div id="reply2_${r.id }" class="reply2">
											<c:forEach items="${r.reply2List }" var="r2" varStatus="status">
												<c:if test="${status.index + 1 <= 5 }">
													<div style="float: left; width: 100%;">
														<c:if test="${r2.user.avatar != null }">
															<a class="reply2_user" href="user?id=${r2.user.id }" style="margin-right: 5px;"><img src="${r2.user.avatar }"></a>
														</c:if>
														<c:if test="${r2.user.avatar == null }">
															<a class="reply2_user" href="user?id=${r2.user.id }" style="margin-right: 5px;"><img src="static/image/noavatar.jpg"></a>
														</c:if>
														<a class="reply2_user" href="user?id=${r2.user.id }">${r2.user.username }:</a>
														<div class="reply2_content">${r2.content }</div>
														<span class="reply2_date">
															<c:if test="${r2.user.id == user.id || user.role > r2.user.role }">
																<a style="color: #3583ba; margin-right: 10px;" href="javascript:;" onclick="javascript:return warning('deleteReply2?id=${r2.id }&tid=${topic.id}&rid=${r.id }')">删除</a>
															</c:if>
															${r2.createtime }
														</span>
													</div>
												</c:if>
												<c:if test="${status.index + 1 == 5 }">
													<div  id="show_reply2_${r.id }" style="float: left; margin-left: 10px;">
														还有${r.reply2List.size() - 5 }条回复,
														<a href="javascript:;" onclick="show_hideReply2('${r.id }')" style="color: #2d64b3;">
															点击查看
														</a>
													</div>
												</c:if>
												<c:if test="${status.index + 1 > 5 }">
													<div class="hide_reply2_${r.id }" style="display: none; float: left; width: 100%;">
														<c:if test="${r2.user.avatar != null }">
															<a class="reply2_user" href="user?id=${r2.user.id }" style="margin-right: 5px;"><img src="${r2.user.avatar }"></a>
														</c:if>
														<c:if test="${r2.user.avatar == null }">
															<a class="reply2_user" href="user?id=${r2.user.id }" style="margin-right: 5px;"><img src="static/image/noavatar.jpg"></a>
														</c:if>
														<a class="reply2_user" href="user?id=${r2.user.id }">${r2.user.username }:</a>
														<div class="reply2_content">${r2.content }</div>
														<span class="reply2_date">
															<c:if test="${r2.user.id == user.id || user.role > r2.user.role }">
																<a style="color: #3583ba; margin-right: 10px;" href="javascript:;" onclick="javascript:return warning('deleteReply2?id=${r2.id }&tid=${topic.id}&rid=${r.id }')">删除</a>
															</c:if>
															${r2.createtime }
														</span>
													</div>
												</c:if>
											</c:forEach>
										</div>
										<script type="text/javascript">
											function reply2(rid) {
												if(document.getElementById('reply2_'+rid).style.display == "none") {
													document.getElementById('reply2_'+rid).style.display = "";
													document.getElementById('reply2_a'+rid).innerHTML = "收起回复";
												}else {
													document.getElementById('reply2_'+rid).style.display = "none";
													document.getElementById('reply2_a'+rid).innerHTML = "展开回复";
												}
											}
											function show_hideReply2(rid) {
												$("#show_reply2_"+rid).hide();
												$(".hide_reply2_"+rid).show();
											}
										</script>
									</c:if>
								</td>
							</tr>
							<tr>
								<th class="pls"></th>
								<th class="plc">
									<div class="po hin">
										<div class="pob cl">
											<em>
												<a class="fastre" href="javascript:;" title="回复" onclick="showWindow('reply', '${r.id}')">回复</a>
												<c:if test="${r.user.id == user.id || user.role > r.user.role }">
													<a href="javascript:;" onclick="javascript:return warning('deleteReply?id=${r.id }&tid=${topic.id}')">删除</a>
												</c:if>
											</em>
											<br/>
										</div>
									</div>
								</th>
							</tr>
						</c:if>
						<c:if test="${r.isdelete == 1 }">
							<tr>
								<td class="pls">
									<div class="pi hm"><a></a></div>
								</td>
								<td class="plc plch">
									<div class="pi">
										<span></span>
										<c:if test="${page.pageNum == 1 }">
											<c:if test="${status.count == 1 }">
												<span style="float: right;">沙发</span>
											</c:if>
											<c:if test="${status.count != 1 }">
												<span style="float: right;">${status.count }#</span>
											</c:if>
										</c:if>
										<c:if test="${page.pageNum != 1 }">
											<span style="float: right;">${status.count * page.pageNum }#</span>
										</c:if>
									</div>
									<div class="content">
										<div style="color: gray;"><br/>该回复已删除<br/><br/></div>
									</div>
								</td>
							</tr>
							<tr>
								<th class="pls"></th>
								<th class="plc">
									<div class="po hin">
										<div class="pob cl">
											<em>
												<a class=""></a>
											</em>
											<br/>
										</div>
									</div>
								</th>
							</tr>
						</c:if>
					</table>
					<table cellspacing="0" cellpadding="0" class="ad">
						<tr>
							<td class="pls"></td>
							<td class="plc"></td>
						</tr>
					</table>
				</c:forEach>
		</div>
	</div>
	
	<div id="reply" class="reply" style="display: none;">
		<form id="reply_form" action="reply" method="post" onsubmit="return getContentHTML()">
			<span><strong style="color: #369; font-size: 18px;">参与/回复主题</strong></span>
			<span style="float: right;"><a class="close" title="关闭" onclick="hideWindow('reply')">关闭</a></span><br/>
			<input type="hidden" name="uid" value="${user.id }">
			<input type="hidden" name="tid" value="${topic.id }">
			<input type="hidden" id="rid" name="rid">
			<span style="font-size: 16px; font-weight: bold;">RE：${topic.title }</span>
			<textarea id="content" name="content" style="display: none" rows="" cols=""></textarea>
			<textarea id="contentText" name="contentText" style="display: none" rows="" cols=""></textarea>
			<div id="editor">
				
		    </div>
		    <button type="submit" id="btn1">回复</button>
		</form>
	    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
	    <script type="text/javascript" src="static/js/wangEditor.min.js"></script>
	    <script type="text/javascript">
	        var E = window.wangEditor
	        var editor = new E('#editor')
	        // 或者 var editor = new E( document.getElementById('editor') )
	        
	        //editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
	        editor.customConfig.uploadImgServer = '${path}/upload'  // 上传图片到服务器
        	editor.customConfig.uploadFileName = 'images';
	        editor.customConfig.uploadImgHooks = {
        	    customInsert: function (insertImg, result, editor) {
      	                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
      	                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
      	         
      	                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
      	                var url =result.data;
      	                insertImg(url);
      	         
      	                // result 必须是一个 JSON 格式字符串！！！否则报错
      	            }
      	        }
	        
	        editor.create();
	        
    	    function getContentHTML() {
				if(editor.txt.text() == "" || editor.txt.text().replace("&nbsp;", "") == "") {
					if(editor.txt.html().indexOf("img") != -1) {
						$('<div>').appendTo('body').addClass('alert alert-info').html('请输入内容(不能发纯图片回复)').show().delay(1500).fadeOut();
					} else {
						$('<div>').appendTo('body').addClass('alert alert-info').html('请输入内容').show().delay(1500).fadeOut();
					}
					return false;
				}
				document.getElementById('content').value = editor.txt.html();
				document.getElementById('contentText').value = editor.txt.text();
				return true;
			}
               
	    </script>
	    <script type="text/javascript">
	    	function showWindow(id, rid) {
	    		if(rid == 0) {
	    			document.getElementById('rid').value = "";
	    			document.getElementById('reply_form').action = "reply";
	    		} else {
	    			document.getElementById('rid').value = rid;
	    			document.getElementById('reply_form').action = "reply2";
	    		}
	    		document.getElementById(id).style.display = "";
	    	}
	    	function hideWindow(id) {
	    		document.getElementById(id).style.display = "none";
	    	}
	    </script>
	</div>
	
</body>
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript">
	var msg = '${msg}';
	if(msg != "") {
		$('<div>').appendTo('body').addClass('alert alert-info').html(msg).show().delay(1500).fadeOut();
	}
	
	var rid = '${rid}';
	if(rid != "") {
		document.getElementById("replyId" + rid).scrollIntoView()
	}
</script>
<script type="text/javascript">
	function warning(url){
	    if(confirm('确定要删除吗') == true){
	    	location.href = url;
	    	return true;
	    }else{
	    	return false;
	    }
	}
</script>
</html>